/*
 * Grid Data table version 1.0
 * author : Triyono; email : mashtree@gmail.com
 * input data example :
 * 		var data = {
 *					labels:['#','name','id'],
 					data:[[1,'john doe','198205152001121001'],[2,'jean doe','198205152001121001']],
 					maxDataPerPage:10,
 					container:'div_container' 
 *				}
 */

function Grid(tbl_data){
	this.labels; //column title
	this.data; //data
	this.dataSearch;
	this.currPage = 1; //current page
	this.maxDataPerPage; //maximum data per page
	this.numOfPage; //total number of page
	this.divContainer; //div tag id container grid
	this.init(tbl_data); 
}

/*
 * initialization
 */
Grid.prototype.init = function(data){
	this.splitData(data);
	this.createSearchColumn(this);
	this.createTable(this);
	this.createNavigation(this);
}

/*
 * split data
 */
Grid.prototype.splitData = function(data){
	this.labels = data.labels; 
	this.data = data.data;
	this.maxDataPerPage = data.maxDataPerPage;
	var container = document.getElementById(data.container);
	this.divContainer = container;
	var count = this.lengthOfArray(this.data);
	/*for(var i in this.data){
		count++;
	}*/
	this.numOfPage = Math.ceil(count/this.maxDataPerPage);
}

/*
 * create Table
 */
Grid.prototype.createTable = function(obj){
	var idTable = "table_grid";
	var idNav = "nav_grid";
	if(obj.isExistDomId(idNav)) document.getElementById(idNav).remove(); //hapus element div navigation
	if(obj.isExistDomId(idTable)) document.getElementById(idTable).remove(); //hapus element table
 	var endData = (obj.currPage-1)*obj.maxDataPerPage+obj.maxDataPerPage; //console.log(endData);
 	var beginData = (obj.currPage-1)*obj.maxDataPerPage; //console.log(beginData);
 	var data_array = obj.splitDataPerPage(beginData,endData);
 	// table
 	var table = document.createElement("table");
 	table.className = "table_grid";
 	table.setAttribute("id",idTable);
 	// thead
 	var thead = document.createElement("thead");
 	// column label
 	for(var i in obj.labels){
 		var tmp = document.createElement("th");
 		//TODO set action for order data
 		tmp.onclick = function(){
 			order(obj,obj.labels[i],obj.order);
 		} 
 		//TODO set th width
 		tmp.appendChild(document.createTextNode(obj.labels[i]));
 		thead.appendChild(tmp);
 	}
 	table.appendChild(thead); //insert thead to table
 	// data
 	for(var i in data_array){
 		var tr = document.createElement("tr");
 		var tmp_data = data_array[i]; 
 		for(var j in tmp_data){
 			var td = document.createElement("td");
 			td.appendChild(document.createTextNode(tmp_data[j]));
 			tr.appendChild(td);
 		}
 		table.appendChild(tr); //insert tr to table
 	}
 	var container = obj.divContainer; 
 	container.appendChild(table); // insert table to container
 	obj.createNavigation(obj);
}

/*
 * create Navigation [paging, search, num data per page]
 */
Grid.prototype.createNavigation = function(obj){
	//TODO create navigation
	var idNextOne = "nextOne";
	var idPrevOne = "prevOne";
	var idPrev = "prev";
	var idNext = "next";
	var idFirst = "first";
	var idLast = "last";

	var nextOne,prev,next,first,last,prevOne;
	var divNav = document.createElement('div');
	divNav.className = "nav_grid"; //kelas nav\
	divNav.setAttribute("id","nav_grid");
	if(obj.isExistDomId(idNextOne)){
		nextOne = document.getElementById(idNextOne);
	}else{
		nextOne = document.createElement('input');
		nextOne.type = "button";
		nextOne.value = "Next";
		nextOne.className = "grid paging";
		nextOne.setAttribute("id",idNextOne); 
	}

	if(obj.isExistDomId(idNext)){
		next = document.getElementById(idNext);
	}else{
		next = document.createElement('input');
		next.type = "button";
		next.value = ">";
		next.className = "grid paging-kecil";
		next.setAttribute("id",idNext);
	}

	if(obj.isExistDomId(idPrevOne)){
		prevOne = document.getElementById(idPrevOne);
	}else{
		prevOne = document.createElement('input');
		prevOne.type = "button";
		prevOne.value = "Prev";
		prevOne.className = "grid paging";
		prevOne.setAttribute("id",idPrevOne);
	}

	if(obj.isExistDomId(idPrev)){
		prev = document.getElementById(idPrev);
	}else{
		prev = document.createElement('input');
		prev.type = "button";
		prev.value = "<";
		prev.className = "grid paging-kecil";
		prev.setAttribute("id",idPrev);
	}

	if(obj.isExistDomId(idFirst)){
		first = document.getElementById(idFirst);
	}else{
		first = document.createElement('input');
		first.type = "button";
		first.value = "<<";
		first.className = "grid paging-kecil";
		first.setAttribute("id",idFirst);
	}

	if(obj.isExistDomId(idLast)){
		last = document.getElementById(idLast);
	}else{
		last = document.createElement('input');
		last.type = "button";
		last.value = ">>";
		last.className = "grid paging-kecil";
		last.setAttribute("id",idLast);
	}

	if(obj.currPage==1){
		//TODO cek komponen lain, jika ada, hapus dari container
		//first,prev,next,last,prevOne
		if(obj.isExistDomId(idFirst)) document.getElementById(idFirst).remove();
		if(obj.isExistDomId(idPrev)) document.getElementById(idPrev).remove();
		if(obj.isExistDomId(idNext)) document.getElementById(idNext).remove();
		if(obj.isExistDomId(idLast)) document.getElementById(idLast).remove();
		if(obj.isExistDomId(idPrevOne)) document.getElementById(idPrevOne).remove();
		nextOne.onclick = function(){ 
			//TODO call function createTable
			nav(obj,"next",obj.createTable);
		}
		divNav.appendChild(nextOne);
	}else if(obj.currPage>1 && obj.currPage<obj.numOfPage){
		//TODO cek komponen lain, jika ada, hapus dari container
		//nextOne,prevOne
		if(obj.isExistDomId(idNextOne)) document.getElementById(idNextOne).remove();
		if(obj.isExistDomId(idPrevOne)) document.getElementById(idPrevOne).remove();  
		first.onclick = function(){
			nav(obj,"first",obj.createTable);
			//TODO call function createTable
		}
		prev.onclick = function(){
			nav(obj,"prev",obj.createTable);
			//TODO call function createTable
		}
		next.onclick = function(){
			nav(obj,"next",obj.createTable);
			//TODO call function createTable
		}
		last.onclick = function(){
			nav(obj,"last",obj.createTable);
			//TODO call function createTable
		}
		divNav.appendChild(first);
		divNav.appendChild(prev);
		divNav.appendChild(next);
		divNav.appendChild(last);
	}else if(obj.currPage==obj.numOfPage){
		//TODO cek komponen lain, jika ada, hapus dari container
		//first,prev,next,last,nextOne
		if(obj.isExistDomId(idFirst)) document.getElementById(idFirst).remove();
		if(obj.isExistDomId(idPrev)) document.getElementById(idPrev).remove();
		if(obj.isExistDomId(idNext)) document.getElementById(idNext).remove();
		if(obj.isExistDomId(idLast)) document.getElementById(idLast).remove();
		if(obj.isExistDomId(idNextOne)) document.getElementById(idNextOne).remove(); 
		prevOne.onclick = function(){
			//TODO call function createTable
			nav(obj,"prev",obj.createTable);	
		}
		divNav.appendChild(prevOne);
	}
	obj.divContainer.appendChild(divNav);

}

/*
 * split data per page
 */
Grid.prototype.splitDataPerPage = function(beginData,endData){
	var data_array = []; 
	var count = 0;
	for(var i in this.data){
		if((count > (beginData-1) && count <= (endData-1))){
			data_array.push(this.data[i]);
		}
		count++;
	}

	return data_array;
}

/*
 * create search column
 */

 Grid.prototype.createSearchColumn = function(obj){console.log('test');
 	var div = document.createElement('div');
 	div.setAttribute('id','div-search');
 	var search = document.createElement('input');
 	div.setAttribute('id','search');
 	search.type = "text";
 	search.className = 'search';
 	var bt_search = document.createElement('input');
 	bt_search.type = 'button';
 	bt_search.value = 'cari';
 	bt_search.className = 'search';
 	
 	div.appendChild(search);
 	div.appendChild(bt_search);
 	var container = obj.divContainer;
 	container.appendChild(div);
 	search.onchange = function(){

 	}
 }

/*
 * length of array data
 */
Grid.prototype.lengthOfArray = function(data){
	var count = 0;
	for(var i in data){
		count++;
	}

	return count;
}

//TODO width of column
Grid.prototype.columnWidth = function(){

}

/*
 * cek objek ada di div nav
 */
Grid.prototype.isExistDomId = function(id){
	var tmp = false;
	//TODO cek child di parent
	if(document.getElementById(id)){
		tmp = true;
	}
	return tmp;
}

/*
 * callback function for nav-paging
 */
function nav(obj, navTo, callback){
	var page = obj.currPage; 
	switch(navTo){
		case "prev":
			page--;
			break;
		case "next":
			page++;
			break;
		case "first":
			page = 1;
			break;
		case "last":
			page = obj.numOfPage;
			break;
		default:
			console.log("nav error");
	}
	obj.currPage = page; 
	callback(obj);
}

/*
 * TODO order, search, delete, edit, page-shortcut (select)
 */
Grid.prototype.order = function(column, page){
	var data = this.data;
	var label = this.labels;
	var lblOrder = 0; //array index for column
	for(var i in label){
		if(column==label[i]){
			break;
		}
		lblOrder++;
	}
	
}

/*
 * callback function for searching
 */
function search(obj, callback){
	var search = document.getElementById('search').value;
	//TODO 
	//filter keyrword, find data type which column's similar
	//create data search from column index
	callback(obj);
}

/*
 * callback function for order data
 */

 function order(obj, labels, callback){
 	callback(obj,labels);
 }